<template>
  <div class="bg-positive">
    <div class="row">
      <div class="col-12 col-md-8">
        <t-tabs :staticItems="list" dense>
          <div name="listView" label="{$lang.tabs.listView}" >asdf</div>
          <div name="chartView" label="{$lang.tabs.chartView}" >AAAA</div>
        </t-tabs>
      </div>
      <div class="col-12 col-md-4">
        <q-button>导入导出</q-button>
      </div>
    </div>
  </div>
</template>

<script>
  import options from './options';

  import { onMounted, ref } from 'vue';
  export default {
    setup() {
      const rows = ref([]);

      const pagination = ref({
        // sortBy: 'desc',
        // descending: false,
        page: 1,
        rowsPerPage: 3,
        rowsNumber: 2001,
      });

      const loading = ref(false);

      function onRequest(props) {
        debugger;
        const { page, rowsPerPage, sortBy, descending } = props.pagination;
        const filter = props.filter;

        loading.value = true;

        setTimeout(() => {
          fetchFromServer(props.pagination, props.filter);
        }, 1500);
      }

      function fetchFromServer(_pagination, filter) {
        const { page, rowsPerPage, sortBy, descending, rowsNumber } =
          _pagination;
        const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

        // calculate starting row of data
        const startRow = (page - 1) * rowsPerPage;

        fetch(
          `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
        ).then(response => {
          response.json().then(movies => {
            // rows.value = movies;
            // clear out existing data and add new
            rows.value.splice(0, rows.value.length, ...movies);

            // don't forget to update local pagination object
            pagination.value.rowsNumber = 2001;
            pagination.value.page = page;
            pagination.value.rowsPerPage = rowsPerPage;
            pagination.value.sortBy = sortBy;
            pagination.value.descending = descending;

            loading.value = false;
          });
        });
      }

      let Widget = {};
      onMounted(() => {
        Widget.instance1 = vm.instance1.value;
        fetchFromServer(pagination.value, '');
      });
      const list = [
        {
          label: '新建',
          code: '111',
        },
        {
          label: '编辑',
          code: '222',
        },
        {
          label: '开发完成',
          code: '333',
        },
      ];

      let vm = {
        list,
        instance1: ref(),
        pagination: pagination,
        rowKey: options.idField,

        selectOpts: ['none', 'multiple', 'single'],
        optColumns: options.columns,
        rows,
        loading,
        onRequest,
      };
      return vm;
    },
  };
</script>
